﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>Test Drill Down in Highcharts</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <style>
  	body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }  
  </style>
  
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  
  <?php include('../connections/connect.php'); ?>
  <?php include('../functions/graphfunctions.php'); ?>
  <?php
	ini_set('max_execution_time', 300);
	
	$str_type = "";
	$str_subType = "";
	$str_data = "";
	$q_data = "BRANCH";
	$str="";
	
	/*-----------------------------------------query จำนวนหัวดับเพลิงรายรายสาขา--------------------------------------------------------------*/
	$allbranchid = array(); 
	$allbranchamt = array();
	$allbranchname = array();	
	//ตัวอย่าง http://www.sunzan-design.com/2013/04/php-query-mysql.html
	$sqlcommand="select distinct ($q_data) as type_name , sum(AMOUNT) as count_amt from valve $str_type $str_subType $str_data group by type_name";
	$result = mysql_query($sqlcommand, $connect)or die(mysql_error()); 
	$num = mysql_num_rows($result);
	$i=0; $countbranch=0;
	while ($row = mysql_fetch_assoc($result)) {    
		$allbranchid[$i] = trim(addslashes($row['type_name']));
		$allbranchname[$i] = getBrachName($allbranchid[$i]);
		$allbranchamt[$i] = $row['count_amt'];
		$countbranch = $i;
		$i++;
	}
		
	/*------------------------------------------------------------------------- เรียงลำดับสาขาจาก รหัสสาขา เป็นเรียงตามภาค ----------------------------------------------------------------------------------------------*/
		$allbranchid = sortBranch($allbranchid);
		$allbranchname = sortBranch($allbranchname);
		$allbranchamt = sortBranch($allbranchamt);
	/*---------------------------------------------------------------------- เมื่อเรียงลำดับ สาขาใหม่แล้ว จะนำข้อมูลที่เรียงลำดับใหม่ มา query ต่อจนครบทั้ง zone และ DMA ---------------------------------------------------------------*/
		
	/*--------------------------------query ข้อมูล จำนวนหัวดับเพลิงรายzone ในแต่ละ สาขา----------------------------------------------------------------------*/
	
	$branch_zone_id = array(array()); 
	$zoneamt = array(array());
	$countzone = array();
	
	for ($i =0;$i<=$countbranch;$i++){
		$j=0;
		$q_data = "ZONE_";
		$str_type = " where BRANCH ='".$allbranchid[$i]."'";
				
		$sqlcommand="select distinct ($q_data) as type_name , sum(AMOUNT) as count_amt from valve $str_type $str_subType $str_data group by type_name";
		$result = mysql_query($sqlcommand, $connect)or die(mysql_error()); 
		$num = mysql_num_rows($result);
		
		while ($row = mysql_fetch_assoc($result)) {    
			$branch_zone_id[$i][$j] = trim(addslashes($row['type_name'])); // get ข้อมูลชื่อโชนในแต่ละสาขา
			$zoneamt[$i][$j] = $row['count_amt'];	// get ข้อมูลจำนวนหัวดับเพลิง รายโซนในแต่ละสาขา
			$countzone[$i] = $j;	//นับจำนวน zone ในแต่ละสาขา
			$j++;
		}  
	}
	
	/*----------------------------------------------------------query ข้อมูล จำนวนหัวดับเพลง ราย DMA ในแต่ละ zone และ สาขา-----------------------------------*/

	$branch_zone_dma_id = array(array(array())); 
	$dma_amt = array(array(array()));
	$countdma = array(array());
	
	for ($i =0;$i<=$countbranch;$i++){
		
		for($j =0;$j<=$countzone[$i];$j++){
			$k=0;
			$q_data = "BLOCK";
			$str_type = " where BRANCH ='".$allbranchid[$i]."'";
			$str_subType = " and ZONE_='".$branch_zone_id[$i][$j]."'";
					
			$sqlcommand="select distinct ($q_data) as type_name , sum(AMOUNT) as count_amt from valve $str_type $str_subType $str_data group by type_name";
			$result = mysql_query($sqlcommand, $connect)or die(mysql_error()); 
			$num = mysql_num_rows($result);
			
			while ($row = mysql_fetch_assoc($result)) {    
				$branch_zone_dma_id[$i][$j][$k] = trim(addslashes($row['type_name']));

				$dma_amt[$i][$j][$k] = $row['count_amt'];
				$countdma[$i][$j] = $k;
				$k++;
			
			}
		
		}
		
	}
	
	/*----------------------------------------------------------------------ตรียมข้อมูล categories data ของสาขาเพื่อใส่ใน graph------------------------------*/
	echo $categories_branch = setCategoriesBranch($allbranchname,$countbranch);
	echo "<br>";
	/*----------------------------------------set data เพื่อเตรียม print ชุดข้อมูลลง Graph ----------------------------*/
	echo $outputdata = printData($allbranchid,$allbranchname,$allbranchamt,$countbranch,$branch_zone_id,$zoneamt,$countzone,$branch_zone_dma_id,$dma_amt,$countdma);
		
	?>
 
   <script type="text/javascript">
	var chart;
	var name1='';
	$(document).ready(function () {
    
	//http://jsfiddle.net/NULTY/456/ <--check psudo code
	Highcharts.setOptions({
     colors: ['#463E3F', '#504A4B', '#848482', '#3EA055', '#4CC417', '#7FE817', '#8AFB17','#F70D1A','#FF0000', '#E55451', '#E77471','#E78A61','#157DEC','#1589FF','#6495ED','#6495ED','#3BB9FF','#82CAFA']
    }); 
       
		var colors = Highcharts.getOptions().colors,
			categories = [<?php echo $categories_branch; ?>],
			name = 'สาขา',
			level = 0,
			data = [<?php echo $outputdata ?>];
			
	   
		function setChart(name, categories, data, color, level) {
			chart.xAxis[0].setCategories(categories);
			chart.series[0].remove();
		   
		   
			chart.addSeries({
				name: name,
				data: data,
				level: level,
				color: color || 'white'
			});
		}
	   
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container', 
				type: 'column'
			},
			title: {
				text: 'จำนวนประตูน้ำของการประปานครหลวง'
			},
			subtitle: {
				text: 'จำนวนประตูน้ำของการประปานครหลวงรวมทุกสาขา'
			},
			xAxis: {
				categories: categories                     
			},
			yAxis: {
				title: {
					text: 'จำนวนประตูน้ำ'
				}
			},
			plotOptions: {
				column: {
					cursor: 'pointer',
					point: {
						events: {
							click: function() {

								var drilldown = this.drilldown;
								if (drilldown) { // drill down
								
								this.series.chart.setTitle({
									    text: 'จำนวนประตูน้ำของการประปานครหลวง'
									 }, {
										text:  'จำนวนประตูน้ำของการประปานครหลวงภายใน ' +name1 +' '+drilldown.name
										});
									//console.log(drilldown);
									name1 = drilldown.name;
								
									setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
								} else { // restore
									name1 = '';
									chart.setTitle({
									    text: 'จำนวนประตูน้ำของการประปานครหลวง'
									 }, {
										text: 'จำนวนประตูน้ำของการประปานครหลวงรวมทุกสาขา'
										});
									setChart(name, categories, data, null,level);
								}
							}
						}
					},
					dataLabels: {
						enabled: true,
						color: colors[0],
						style: {
							fontWeight: 'bold'
						},
						formatter: function() {
							return this.y +'ตัว';
						}
					}               
				}
			},
			tooltip: {
				formatter: function() {
					/*var point = this.point, s = '';
					
					 switch (this.series.options.level) {
						case 0:
							s = 'row 1 level 1 instructions<br/>';
							s += ' row 2 level 1 instructions';
							break;
						
						case 1:
							s = 'row 1 level 2 instructions <br/>';
							s += ' row 2 level 2 instructions';
							break;
						
						case 2:
							s = 'row 1 level 3 instructions<br/>';
							s += 'row 2 level 3 instructions';
							break;
					}*/
						var point = this.point,
							s = this.x +'มีหัวดับเพลิงทั้งหมด จำนวน: <b>'+ this.y +'ตัว</b><br/>';
						if (point.drilldown) {
							s += 'คลิ๊กเพื่อดูรายละเอียดของข้อมูลใน '+ point.category;
						} else {
							s += 'คลิ๊กเพื่อกลับไปดูข้อมูลรายสาขา';
						}
			 
				 
					return s;
				}
			},
			series: [{
				name: name,
				level: level,
				data: data,
				color: 'white'
			}],
			exporting: {
				enabled: false
			}
		});
	   
	   
	});
    
	</script>
  
</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>